<link rel="stylesheet" type="text/css" href="./css/utilities.css"/>
  <script>
  /* =============== Utilities & Scripts Tab Menu =====================  */
 $(function() {   
    //callback function to bring a hidden box back
    function callback1() {
      //setTimeout(function() { $( "#effect:visible" ).removeAttr( "style" ).fadeOut();}, 1000 );
         $( "#a_scripts" ).removeClass( "current" );
        $( "#a_utilities" ).addClass( "current" );
    }
    function callback2() {
      //setTimeout(function() { $( "#effect:visible" ).removeAttr( "style" ).fadeOut();}, 1000 );
       $( "#a_utilities" ).removeClass( "current" );
        $( "#a_scripts" ).addClass( "current" );
    }
    // set effect from select menu value
    $( "#a_utilities" ).click(function() {
            $( "#scripts" ).hide();
            var options = {};
           // run the effect
           $( "#utilities" ).show( 'slide', options, 500, callback1 );
           return false;
    });
    $( "#a_scripts" ).click(function() {
            $( "#utilities" ).hide();
            var options = {};
           // run the effect
           $( "#scripts" ).show( 'slide', options, 500, callback2 );
           return false;
    });
 // $( "#utilities" ).hide();
	$( "#scripts" ).hide();
	/* =============== Datepicker ================ */
   // $("#datepicker" ).datepicker({ dateFormat: "yy-mm-dd" , appendText: "(yyyy-mm-dd)" });
  });
//================================= PopUp ============================ //
$(document).ready( function() {
		// When site loaded, load the Popupbox First
		// $('#popup_hejri > .popupBoxClose').click( function() {	
			// $('#popup_hejri').fadeOut("slow");
		// });
		$('#meladyToHejri').click( function() {
			$("#popup_hejri").css({"left":"500px"});
			popUp("popup_hejri");
		});
		//=========================================/
		// $('#popup_timePrayers > .popupBoxClose').click( function() {	
			// $('#popup_timePrayers').fadeOut("slow");
			// $("#backgroundPopup").fadeOut("slow"); 
		// });
		$('#timePrayers').click( function() {
			// $("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
			// $("#backgroundPopup").fadeIn(0001); 
			// $("#popup_timePrayers").fadeIn(0500);
			$("#popup_timePrayers").css({"left":"400px"});
			popUp("popup_timePrayers");
		});
		// ======================================== //
		$('#imageProcessing').click( function() {
			$("#popup_imageProcessing").css({"left":"200px","top":"20px","width":"950px","height":"550px"});
			popUp("popup_imageProcessing");
		});
		
});
function popUp(id){
	$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
	$("#backgroundPopup").fadeIn(0001); 
	$("#"+id).fadeIn(0500);
	
	$('#'+ id +' > .popupBoxClose').click( function() {	
			$('#'+ id).fadeOut("slow");
			$("#backgroundPopup").fadeOut("slow"); 
		});
}
  </script>
  <script type="text/javascript" src="./js/ajax.js"></script>
  <script type="text/javascript" src="./js/tooltip.js"></script>
<div class="tabs">
    <a  href ="javascript: void(0)" id="a_utilities" class="tab current">خدمات</a>
    <a href="javascript:void(0)" id="a_scripts" class="tab">سكربتات</a>
 </div>
<div class="clear"></div>

<div class="toggler">
<!-- ============= Tooltip DIV ================ -->
      <div class="hint">
          <div id="hint_center">
                  <p></p>
            </div>
      </div>
	   <div id="backgroundPopup"></div>	
  <!-- ===================  Utilities =================== -->
  <div id="utilities">
    <div class="hotsite hotsite-ele cur" id="hotsite" >
	
	  <!-- =========== التاريخ الهجري ================-->
      <span  id="u_hejriDate" class="tooltip">
        <a class="hotsite_link" href="javascript:void(0);" >
          <img src='./images/utilities/hejri.png'  class="i-hot-sprites"/>
          <label class="span-hot-name">التاريخ الهجري</label></a>
      </span>
      <em>	<?php echo "اليوم : ".CDate::hejri_date("Today","h",0,1,1,1);
				  echo "<br/> الموافق : ".CDate::hejri_date("Today","m",0,1,1,1);
				  ?>
		</em>
      <!-- ========== التحويل من ميلادي لهجري ============== -->
        <span id="meladyToHejri" class="tooltip">
              <a class="hotsite_link" href="javascript:void(0); " log-index="2">
                <img src="./images/utilities/m-hejri.png" class="i-hot-sprites"/>
                <label class="span-hot-name" style="visibility: visible;"> ميلادي - هجري </label></a>
        </span>
		<em> لمعرفة التاريخ الهجري الموافق للتاريخ الميلادي</em>
		<div id="popup_hejri" class="popup_box">	<!-- OUR PopupBox DIV-->
	            <a href="javascript:void(0);" class="popupBoxClose"></a>
				<form>
					<label>التاريخ الميلادي </label> <input type="text" id="datepicker" name="meladyDate"/> <br/>
					<label>التاريخ الهجري </label> <span id="hejriDate" style="color:red"></span> <br/>
					<button onclick="javascript: return getHejri(this);">حوًّل </button>
					<span class='loading'></span>
				</form>
        </div> 	
		<!-- ========== مواقيت الصلاة ============== -->
        <span id="timePrayers" class="tooltip">
              <a class="hotsite_link" href="javascript:void(0)" log-index="2">
                <img src="./images/utilities/time-prayer.jpg" class="i-hot-sprites"/>
                <label class="span-hot-name" style="visibility: visible;">  مواقيت الصلاة</label></a>
        </span>
		<em>مواقيت الصلاة في عدد من البلاد العربية </em>
		<div id="popup_timePrayers" class="popup_box">	<!-- OUR PopupBox DIV-->
	            <a href="javascript:void(0);" class="popupBoxClose"></a>
				<h1> مواقيت الصلاة  </h1>
			<form>
			<div style="padding:10px; background-color: #F8F7F4; border: 1px dashed #EAE9CD;">
				<label>البلد : </label>
				<select id="tpCountry" name="tp_country">
					<option value="EG_Cairo">القاهرة - مصر</option>
					<option value="SA_Mecca"> مكة المكرمة - السعوديه</option>
					<option value="SA_Riyadh"> الرياض - السعودية</option>
					
				</select> <br/>
				حسابات مواقيت الصلاة طبقا لـ :
				<select id="tpMethod" name="method" size="1">
					<!--option value="0">Shia Ithna-Ashari</option>
					<option value="7">Institute of Geophysics, University of Tehran</option-->
					<option value="3">Muslim World League (MWL) رابطو علماء المسلمين - الرياض</option>
					<option value="4">Umm al-Qura, Makkah جامعة أم القرى - مكة </option>
					<option value="5">Egyptian General Authority of Survey الهئية العامة  للمساحه  - مصر</option>
					<option value="2">Islamic Society of North America (ISNA)</option>
					<option value="1">University of Islamic Sciences, Karachi</option>
				</select>	
				<?php $today = "اليوم : ".CDate::hejri_date("Today","h",0,1,1,1);
				  $today .= "<br/> الموافق : ".CDate::hejri_date("Today","m",0,1,1,1); ?>
				<button onclick="javascript: return getTimePrayers(<?php echo $today; ?>);">النتائج </button>
			</div>
			</form>
			<div id="praytime_out"></div>
        </div> 
		<!-- ========== online visitors ============== -->
        <span id="onlineVisitors" class="tooltip">
              <a class="hotsite_link" href="javascript:void(0)" >
                <img src="./images/utilities/online-users.png" class="i-hot-sprites"/>
                <label class="span-hot-name" style="visibility: visible;">المتواجدون الآن</label></a>
        </span>
		<em> 
			عدد المتواجدون لزيارة الموقع الآن :
			<?php 
			 $onlineUsers = UserStats::usersOnline("inc/usersOnline.txt",30);
			 echo sizeof($onlineUsers);
			
			?>
		</em>	 	
		<!-- ========== visitors country ============== -->
        <span id="visitorInfo" class="tooltip">
              <a class="hotsite_link" href="javascript:void(0)" >
                <img src="./images/utilities/ip2country.png" class="i-hot-sprites"/>
                <label class="span-hot-name" style="visibility: visible;"> بلد الزائر</label></a>
        </span>
		<em>  تحديد بلد الزائر عن طريق عنوان IP :<br/>
		<?php $ip_location = new  IP2Location();
		$country = $ip_location->getCountryFromIP("inc/ip_to_country.csv",$_SERVER['REMOTE_ADDR']);
		echo "Your IP:".$_SERVER['REMOTE_ADDR'];
		echo "<br/><img src='http://cdn.whatismyipaddress.com/images/flags/".strtolower($country['Code']).".png' />";
		echo " Your Country: ".$country['Name'];
		?>
		</em>
		<div id="popup_visitorInfo" class="popup_box">	<!-- OUR PopupBox DIV-->
	            <a href="javascript:void(0);" class="popupBoxClose"></a>
				<div id="visitorInfo_out"></div>
        </div>  	
<!-- ========================= Images Processing ========================= -->
<link href="./css/imgeffects.css" type='text/css' rel="stylesheet"/>
<script src="./js/jquery/jquery.form.js"></script>
<script>
$(function() {
    
var bar = $('.upload-bar');
var percent = $('.upload-percent');
var upload_out = $('#upload_out');
   
$('#upload').ajaxForm({
    beforeSend: function() {
        //status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        $('.percent').html(percentVal);
		var xmlDoc ='';
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
	complete: function(xmlhttp) {
		upload_out.html( xmlhttp.responseText);
	}
}); 

});

function IMG_effects(ele,effect){
  $(document).ready(function(){
      $.ajax(
      {
        beforeSend:function (XMLHttpRequest){
        // $("#irc_mimg").html( );  
			$("#image_effects ul li").css({'background':"#ffffff"});
        },
        data: {submitForm:'IMG_EFFECTS', IMG_effect: effect, IMG_name : $("#IMG_name").val()} , 
        success:function (data){
			$("#irc_mimg").html(data[0]);
			$(ele).css({'background':"#bbbbbb"});
        }, 
        type:"post", 
		dataType: "json",
        url:"./inc/upload.php"
      }
    );   
    });  
	return false;
}       
</script>
        <span id="imageProcessing" class="tooltip">
              <a class="hotsite_link" href="javascript:void(0)" >
                <img src="./images/utilities/photo.png" class="i-hot-sprites"/>
                <label class="span-hot-name" style="visibility: visible;">معالجة صور</label></a>
        </span>
		<em> إمكانية عمل بعض التعديلات على الصور</em>
		<div id="popup_imageProcessing" class="popup_box">	<!-- OUR PopupBox DIV-->
	        <a href="javascript:void(0);" class="popupBoxClose"></a>
			<h4>تحميل الصورة :</h2>
			<div class="upload-form">
				<form id="upload" action="./inc/upload.php" method="post" enctype="multipart/form-data" >
				<input type="file" name="upl">
				<input type="submit" value="تحميل">
				</form>
				<div class="upload-progress">
					<div class="upload-bar"></div>
					<div class="upload-percent">0%</div>
				</div>
			</div>	
				<div id="upload_out">
					<fieldset dir="rtl">
					<legend>بيانات الصورة</legend>
					<label>الاسم : </label><span> ---- </span>   <br/>
					<label>الأبعاد: </label><span> ---- </span><br/>
					<label>الحجم: </label><span> ---- </span>
					</fieldset>
					<div id='irc_mimg'>
						<img src='./images/utilities/no-photo.png'  id='irc_mi' width='600' height='350' />
					</div>
				</div>
				<div id="image_effects" >
					<form>
						<fieldset dir="rtl">
						<legend>التأثيرات</legend>
						<ul class='effects-list'>
						 <li onclick="javascript:return IMG_effects(this,1);">
						<img src='./images/utilities/effects/01.jpg'  id='irc_mi' />
						 </li>
						 <li onclick="javascript:return IMG_effects(this,2);">
						<img src='./images/utilities/effects/02.jpg'  id='irc_mi' /></li>
						 <li onclick="javascript:return IMG_effects(this,3);">
						<img src='./images/utilities/effects/03.jpg'  id='irc_mi' /></li>
						 <li onclick="javascript:return IMG_effects(this,4);">
						 <img src='./images/utilities/effects/04.jpg'  id='irc_mi' /></li>
						  <li onclick="javascript:return IMG_effects(this,5);">
						<img src='./images/utilities/effects/05.jpg'  id='irc_mi' /></li>
						   <li onclick="javascript:return IMG_effects(this,6);">
					     <img src='./images/utilities/effects/06.jpg'  id='irc_mi' /></li>
						    <li onclick="javascript:return IMG_effects(this,7);">
						 <img src='./images/utilities/effects/07.jpg'  id='irc_mi' /></li>
							 <li onclick="javascript:return IMG_effects(this,8);">
						  <img src='./images/utilities/effects/08.jpg'  id='irc_mi' /></li>
							  <li onclick="javascript:return IMG_effects(this,9);">
						   <img src='./images/utilities/effects/09.jpg'  id='irc_mi' /></li>
							   <li onclick="javascript:return IMG_effects(this,10);">
						  <img src='./images/utilities/effects/10.jpg'  id='irc_mi' /></li>
							   <li onclick="javascript:return IMG_effects(this,11);">
						    <img src='./images/utilities/effects/11.jpg'  id='irc_mi' /></li>
							   <li onclick="javascript:return IMG_effects(this,12);">
						   <img src='./images/utilities/effects/12.jpg'  id='irc_mi' /></li>
							   <li onclick="javascript:return IMG_effects(this,13);">
						   <img src='./images/utilities/effects/13.jpg'  id='irc_mi' /></li>
							   <li onclick="javascript:return IMG_effects(this,14);">
						   <img src='./images/utilities/effects/14.jpg'  id='irc_mi' /></li>
						</ul>
						</fieldset>
					</form>
				</div>
        </div>  		 	
		
		
		
		
		
		
							
							
      </div>

  </div>
<!-- ===================  END Utilities =================== -->
<!-- ==================== Scripts ================ -->
    <div id="scripts" class="ui-widget-content ui-corner-all">
		<div class="hotsite hotsite-ele cur" id="hotscripts" >
		  <!-- =========== PopUp  ================-->
			<span  id="" class="tooltip">
			<a class="hotsite_link" href="./scripts/popup.html" target ="_blank" >
			  <img src='./images/utilities/popup.png'  class="i-hot-sprites"/>
			  <label class="span-hot-name">سكربت Pop Up </label></a>
			</span>
			<em>	سكربتات خروج النافذة الداخلية PopUp Box (DIV)</em>
			<!-- =========== Slider  ================-->
			<span  id="" class="tooltip">
			<a class="hotsite_link" href="javascript:void(0);" >
			  <img src='./images/utilities/slider.png'  class="i-hot-sprites"/>
			  <label class="span-hot-name">Sliders</label></a>
			</span>
			<em>	</em>
			<!-- =========== DatePicker  ================-->
			<span  id="" class="tooltip">
			<a class="hotsite_link" href="javascript:void(0);" >
			  <img src='./images/utilities/calendar.gif'  class="i-hot-sprites"/>
			  <label class="span-hot-name">Datepicker</label></a>
			</span>
			<em>	</em>
			<!-- =========== HTML5 & SVG  ================-->
			<span  id="" class="tooltip">
			<a class="hotsite_link" href="javascript:void(0);" >
			  <img src='./images/utilities/html5.png'  class="i-hot-sprites"/>
			  <label class="span-hot-name">HTML5 & SVG</label></a>
			</span>
			<em>	</em>
			
			
			
			
		</div>
    </div>
<!-- ==================== END Scripts ================ -->	
</div>

 